<template>
    <div>
        <!-- <div class="box" @mousemove="move"></div> -->
        <!-- <div v-for="item in 3" :key="item" class="box" @mousemove="move(item,$event)"></div>
    <p>{{x}}</p>
    <p>{{y}}</p>
    <p>{{count}}</p>

    <div class="bigbix" @click="bigbox">
        <div class="smaliibox" @click.stop="smallbox"></div>
        <a href="https://www.baidu.com" @click.stop.prevent>baidu</a>
    </div> -->

        <!-- <input type="text" placeholder="输入回车提交" @keyup.enter="submit"> -->

        <div class="box">
            <span v-show="usernamest" @click="loginshow = true">登录</span>
            <span v-show="usernamest" @click="loginshow = true">注册</span>
            <span v-show="user">{{ username }} </span>
        </div>

        <h1>这是一篇文章</h1>

        <p @copy="copy">有本事来复制我</p>

        <div class="big" @click="showl" v-show="loginshow">
            <div class="login">
                <input type="text" placeholder="请输入用户名" v-model="username">
                <input type="password" placeholder="请输入密码">
                <button @click="loginshow = false; usernamest = false; user = true">登录</button>
            </div>
        </div>
    </div>
</template>

<script>


export default {
    data() {
        return {
            // x:0,
            // y:0,
            // count:0
            loginshow: false,
            username: "",
            usernamest: true,
            user: false
        }
    },
    methods: {
        // move(count,e){
        //     console.log(e);
        //     this.count = count;
        //     this.x = e.pageX;
        //     this.y = e.pageY
        // },
        // bigbox(){
        //     console.log(111);
        // },
        // smallbox(){
        //     console.log(2222);
        // },
        // submit(e){
        //     console.log(e.keyCode);
        //     // if (e.keyCode != 13) return 
        //     alert("cg")
        // }
        showl(e) {
            let mask = document.querySelector(".login");
            if (mask) {
                if (!mask.contains(e.target)) { 
                    this.loginshow = false;
                }
            }

        },
        copy(e) {
            console.log(e);
            if (!this.username) {
                e.returnValue = false;
                alert("请登录");
                this.loginshow = true;
            } else {
                e.returnValue = true;
            }

        }

    },
}
</script>

<style>
/* .box{
    height: 100px;
    width: 100px;
    background-color: aqua;
    float: left;
    margin-left: 40px;
}

.bigbix{
    width: 200px;
    height: 220px;
    background-color: aquamarine;
}
.smaliibox{
    width: 50px;
    height: 50px;
    background-color: rgb(180, 41, 111);
} */
* {
    margin: 0;
    padding: 0;
}

.box {
    width: 100%;
    height: 30px;
    line-height: 30px;
    background-color: black;
    color: #fff;
    display: flex;
    justify-content: flex-end;
}

span {
    display: inline-block;
    margin-right: 20px;
}

span:nth-child(3) {
    font-size: 30px;
}

h1,
p {
    margin: 8px;
}

.login {
    display: flex;
    flex-direction: column;
    width: 600px;
    height: 300px;
    background-color: rgb(212, 44, 122);
    justify-content: space-around;
    align-items: center;
    opacity: 1;
}

input {
    width: 300px;
    height: 30px;
}

button {
    width: 60px;
    height: 60px;
}

.big {
    width: 800px;
    height: 600px;
    background-color: black;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}
</style>